<template>
  <view class="page">
    <template v-if="userInfo">
      <view class="block">
        <view class="header">
          <view class="title">
            <view class="point"></view>
            <view class="text">用户信息</view>
          </view>
        </view>
        <view class="content">
          <view class="item">
            <view class="label">头像</view>
            <view class="right">
              <image class="avatar-image" v-if="userInfo.userIcon" :src="staticUrl + userInfo.userIcon"></image>
              <!-- 没有头像则取昵称的第一个字符 -->
              <view class="avatar-image avatar-text" v-else>{{ userInfo.nickName[0] }} </view>
              <button open-type="chooseAvatar" id="chooseAvatar" @chooseavatar="chooseavatar" class="custom-btn"></button>
              <image class="icon" :src="rightArrowIcon" />
            </view>
          </view>

          <view class="item">
            <view class="label">昵称</view>
            <view class="right" @click="$refs.nickNameInputPopup.open()">
              <view class="text" v-if="userInfo.nickName">{{ userInfo.nickName }}</view>
              <view class="placeholder" v-else>点击获取昵称</view>
              <image class="icon" :src="rightArrowIcon" />
            </view>
          </view>
          <inputPopup
            ref="nickNameInputPopup"
            v-model="userInfo.nickName"
            title="昵称"
            placeholder="请输入或者使用微信昵称"
            input-type="nickname"
            padding-bottom="50vh"
            @submit="submit"
          />

          <view class="item">
            <view class="label">手机号码</view>
            <view class="right">
              <view class="text" v-if="userInfo.phone">{{ userInfo.phone }}</view>
              <view class="placeholder" v-else>点击授权</view>
              <button
                open-type="getRealtimePhoneNumber"
                @getrealtimephonenumber="(e) => bindPhone(e.detail.code)"
                class="custom-btn"
              ></button>
              <image class="icon" :src="rightArrowIcon" />
            </view>
          </view>
        </view>
      </view>

      <!--			关于学习-->
      <view class="block">
        <view class="header" @click="foldBlockChange('aboutStudy')">
          <view class="title">
            <view class="point"></view>
            <view class="text">关于学习</view>
          </view>
          <view class="fold-btn">
            <template v-if="currentFoldBlock !== 'aboutStudy'">
              <view>展开</view>
              <image class="icon" :src="downArrowIcon"></image>
            </template>
            <template v-else>
              <view>收起</view>
              <image class="icon" :src="upArrowIcon"></image>
            </template>
          </view>
        </view>
        <view class="content">
          <aboutStudy :userInfo="userInfo" v-if="currentFoldBlock === 'aboutStudy'"></aboutStudy>
        </view>
      </view>

      <!--					关于院校-->
      <view class="block" v-for="(item, index) in universityCollegeList" :key="item.schoolId">
        <view class="header" @click="foldBlockChange('aboutCollege', item.schoolId)">
          <view class="title">
            <view class="point"></view>
            <view class="text">关于{{ item.schoolName }}</view>
          </view>
          <view class="fold-btn">
            <template v-if="currentFoldBlock === 'aboutCollege' && currentFoldCollege === item.schoolId">
              <view>收起</view>
              <image class="icon" :src="upArrowIcon"></image>
            </template>
            <template v-else>
              <view>展开</view>
              <image class="icon" :src="downArrowIcon"></image>
            </template>
          </view>
        </view>
        <view class="content">
          <aboutCollege
            :userInfo="userInfo"
            v-if="currentFoldBlock === 'aboutCollege' && currentFoldCollege === item.schoolId"
            ref="aboutCollege"
            :universityCollege="item.schoolName"
          ></aboutCollege>
        </view>
      </view>
    </template>
  </view>
</template>

<script>
import store from "../../../store"
import { login, showModal } from "../../../utils"
import request from "../../../utils/request"
import { getBaseUrl } from "../../../utils/settings"
import { getStaticUrl } from "../../../utils/settings"
import { userActionType } from "../../../store/modules/user"
import { bindPhone } from "../bindPhone"
import aboutStudy from "./aboutStudy"
import rightArrowIcon from "./assets/right-arrow.png"
import inputPopup from "@/pages/mine/info/components/inputPopup.vue"
import upArrowIcon from "./assets/up-arrow.png"
import downArrowIcon from "./assets/down-arrow.png"
import aboutCollege from "./aboutCollege.vue"
import shareInfo from "@/utils/shareInfo"
export default {
  data() {
    return {
      userInfo: null,
      staticUrl: getStaticUrl(),
      Object: Object,
      inputForm: {},
      rightArrowIcon,
      currentFoldBlock: "", //当前展开的区块
      upArrowIcon,
      downArrowIcon,
      universityCollegeList: [], //院校列表
      currentFoldCollege: "", //当前展开的院校
    }
  },
  components: { aboutStudy, inputPopup, aboutCollege },
  onLoad(query) {
    //默认打开
    if (query.fold) {
      this.currentFoldBlock = query.fold
    }
    if (query.currentFoldCollege) {
      this.currentFoldCollege = query.currentFoldCollege
      //为了兼容，目前暂时写死
    } else {
      this.currentFoldCollege = "178224024794895564"
    }
    this.init()
    //获取院校列表
    request({
      url: "userinfo/listByClient",
      showLoading: true,
      errorHandle: true,
    }).then((data) => {
      this.universityCollegeList = data
    })
  },
  methods: {
    bindPhone(code) {
      bindPhone(code).finally(() => {
        this.init()
        this.$forceUpdate()
      })
    },
    async init() {
      this.userInfo = await store.dispatch(userActionType.action.userInfo)
    },
    //更改头像
    async chooseavatar(val) {
      uni.showLoading({
        title: "加载中",
        mask: true,
      })
      const avatarTempFilePaths = val.detail.avatarUrl
      let token
      const userInfo = await store.dispatch(userActionType.action.userInfo)
      token = userInfo.token
      //将头像上传
      uni.uploadFile({
        url: getBaseUrl() + "userinfo/uploadFile",
        filePath: avatarTempFilePaths,
        name: "file",
        header: {
          "k-Authorization": token,
        },
        success: (res) => {
          const data = JSON.parse(res.data)
          if (data.code === 200) {
            store.commit(userActionType.mutations.setUserInfo, null)
            this.init()
            uni.hideLoading()
          } else {
            uni.showToast({
              title: data.msg,
              icon: "none",
            })
            console.log(data, "err")
          }
        },
        fail(err) {
          console.log(err, "err")
        },
      })
    },
    //提交个人信息修改
    submit() {
      uni.showLoading({
        title: "加载中",
        mask: true,
      })
      request({
        url: "userinfo/edit",
        method: "post",
        data: {
          nickName: this.userInfo.nickName,
        },
      })
        .then(async (res) => {
          uni.hideLoading()
          uni.showToast({
            title: "修改成功",
            icon: "none",
          })
          store.commit(userActionType.mutations.setUserInfo, null)
          this.init()
        })
        .catch((err) => {
          uni.hideLoading()
          uni.showToast({
            title: err,
            icon: "none",
          })
          console.log(err, "err")
        })
    },
    async foldBlockChange(value, schoolId = "") {
      //当离开的tab为关于院校
      if (this.currentFoldBlock === "aboutCollege") {
        //判断是否有未提交的更改
        if (this.$refs.aboutCollege[0].editing) {
          if (
            !(await showModal({
              title: "提示",
              content: "你有未提交的更改，确定要继续吗？",
              cancelText: "继续编辑",
              confirmText: "放弃更改",
            }))
          ) {
            return
          }
        }
      }
      if (this.currentFoldBlock === value && this.currentFoldCollege === schoolId) {
        this.currentFoldBlock = ""
      } else {
        this.currentFoldBlock = value
      }
      this.currentFoldCollege = schoolId
    },
  },
  provide() {
    return {
      parent: this,
    }
  },
  //右上角分享
  async onShareAppMessage() {
    return await shareInfo.getDefaultShareInfo({
      path: "/pages/mine/info/index",
    })
  },
}
</script>

<style lang="scss" scoped>
.page {
  min-height: 100vh;
  box-sizing: border-box;
  padding-bottom: calc(38rpx + env(safe-area-inset-bottom));
  background: var(--gray-background-color);

  > .block {
    padding: 0 28rpx;
    margin-top: 22rpx;
    background: white;
    .header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .title {
        display: flex;
        align-items: center;
        padding: 22rpx 0;
        .point {
          background: var(--theme-color);
          width: 8rpx;
          height: 28rpx;
          border-radius: 4rpx;
        }
        .text {
          margin-left: 14rpx;
          font-weight: 600;
          font-size: 36rpx;
        }
      }
      .fold-btn {
        color: var(--text-color-light);
        font-size: 28rpx;
        display: flex;
        align-items: center;
        .icon {
          margin-left: 16rpx;
          width: 24rpx;
          height: 12px;
        }
      }
    }
    .content {
      overflow: hidden;
      .item {
        height: 130rpx;
        font-size: 32rpx;
        display: flex;
        align-items: center;
        &:not(:last-child) {
          border-bottom: 2rpx solid #eeeeee;
        }
        .label {
          color: #666666;
        }
        .right {
          width: 0;
          flex: 1;
          justify-content: flex-end;
          display: flex;
          align-items: center;
          position: relative;
          .custom-btn {
            opacity: 0;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
          }
          .icon {
            width: 27rpx;
            height: 27rpx;
            margin-left: 20rpx;
          }
          .placeholder {
            color: #cccccc;
          }
          .wx-btn {
            margin-left: 20rpx;
            font-size: 28rpx;
          }
          .input {
            font-size: 32rpx;
            text-align: right;
            width: 400rpx;
            margin-left: 20rpx;
          }
        }
        .avatar-image {
          width: 100rpx;
          height: 100rpx;
          border-radius: 50%;

          &.avatar-text {
            background: #3c3c3c;
            font-size: 44rpx;
            color: #fff;
            line-height: 100rpx;
            text-align: center;
          }
        }
      }
    }
  }

  > .modify-userInfo {
    position: fixed;
    bottom: 50vh;
    left: 50%;
    transform: translateX(-50%);
    width: 50vw;
    box-sizing: border-box;
    padding-bottom: env(safe-area-inset-bottom);
    display: flex;

    &.single {
      justify-content: center;
    }

    &.multiple {
      justify-content: space-around;
    }

    .modify-btn {
      width: 690rpx;
      background: var(--theme-color);
    }

    .btn {
      display: flex;
      justify-content: center;
      align-items: center;
      color: var(--text-color);
      font-size: 32rpx;
      height: 80rpx;
      border-radius: 40rpx;
    }

    .cancel {
      background: #999999;
      width: 300rpx;
    }

    .confirm {
      background: rgb(0, 81, 166);
      width: 300rpx;
    }
  }
}
</style>
